<template>
    <div>
        <van-nav-bar left-arrow title="详情" @click-left="onClickLeft"></van-nav-bar>
        <div class="group-item">
            <div class="group-top">
                <div class="group-avatar">
                    <img :src="data.user.avatar" />
                </div>
                <div class="group-apply">
                    <h3>
                        {{ data.addadmin }}的小组<span> （{{ data.employeeNum }}人）</span>
                    </h3>
                    <span class="right-info">{{ data.timeText }}</span>
                </div>
            </div>
            <div class="user-wages">
                <table cellspacing="1">
                    <tr>
                        <th>本月开源节流的贡献</th>
                    </tr>
                    <tr>
                        <td>
                            <div v-html="data.achievement"></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="salary-td">
                            <strong>{{ data.month ? parseInt(data.month.split("-")[1]) : "" }}月申请的奖金：</strong>
                            <span class="blue">{{ data.bonus }}元</span>
                        </td>
                    </tr>
                    <tr v-if="data.userId !== user.id && data.alreadyReview">
                        <td class="salary-td"><strong>我认为他们组该拿的奖金：</strong><span class="blue"> 100000元</span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="remote-list">
            <p class="remote-list-head2">
                <span class="strong">统计结果：</span>
                <span>{{ alreadyReivewNum }}人已投票/{{ needReviewNum }}人，参与率：{{ rate }}%</span>
            </p>
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>
                                姓名
                            </th>
                            <th @click="sortList('bonus')">
                                    <span class="font-blue">建议的金额</span
                                    ><span
                                        class="sort-icon"
                                        :class="{
                                            'sort-asc': filter.sortField === 'bonus' && filter.isDesc === 0,
                                            'sort-desc': filter.sortField === 'bonus' && filter.isDesc === 1,
                                        }"
                                    ></span>
                            </th>
                            <th @click="sortList('addtime')">
                                    <span>评价时间</span
                                    ><span
                                        class="sort-icon"
                                        :class="{
                                            'sort-asc': filter.sortField === 'addtime' && filter.isDesc === 0,
                                            'sort-desc': filter.sortField === 'addtime' && filter.isDesc === 1,
                                        }"
                                    ></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="index">
                            <td>
                                <div class="table-user-info">
                                    <img :src="item.user.avatar" class="user-avatar" />
                                    <div>
                                        <h3>{{ item.user.userName }}</h3>
                                        <p>{{ item.user.opDepartmentPositionName }}</p>
                                    </div>
                                </div>
                            </td>
                            <td>{{ item.bonus }}</td>
                            <td style="white-space:pre-wrap;">{{ item.addtimeText }}</td>
                        </tr>
                        <tr>
                            <td colspan="3" @click="getMore()" :class="{ more: totalPage > filter.currentPage, nomore: totalPage <= filter.currentPage }">
                                {{ totalPage > filter.currentPage ? "查看更多 >>" : "没有更多数据了" }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import { Button, Icon, NavBar, Picker, Popup, DatetimePicker, CountDown, Field } from "vant";
import httpRequest from "../../util/httpRequest";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [DatetimePicker.name]: DatetimePicker,
        [CountDown.name]: CountDown,
        [Field.name]: Field,
    },
    data() {
        return {
            data: { user: {} },
            list: [],
            alreadyReivewNum: 0,
            needReviewNum: 0,
            totalPage: 0,
            user: {},
            filter: {
                applyId: "",
                currentPage: 1,
                pageSize: 10,
                maxCount: 0,
                sortField: "addtime",
                isDesc: 1,
            },
        };
    },
    computed: {
        rate() {
            return parseInt((this.alreadyReivewNum / this.needReviewNum) * 100);
        },
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
        this.filter.applyId = this.$route.query.id;
        httpRequest.get("userInfo", {}).then((res) => {
            this.user = res.data.userInfo;
        });
        this.getList();
    },
    methods: {
        getEntryTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let month = (now - timer) / 1000 / 60 / 60 / 24 / 30;
            if (month > 12) {
                month = month / 12;
                return parseInt(month + "") + "年";
            } else {
                month = month < 1 ? 1 : month;
                return parseInt(month + "") + "个月";
            }
        },
        getList() {
            httpRequest.post("teamApplyDetail", this.filter).then((res) => {
                this.data = res.data.teamApply;
                this.data.timeText = this.data.addtime ? this.data.addtime.slice(0, 16) : "--";
                this.data.achievement = this.data.achievement.replace(/\n/g, "<br />");
                this.list = res.data.teamUserreviewList;
                this.list.forEach((e, index) => {
                    e.addtimeText = e.addtime ? e.addtime.slice(0, 16) : "";
                    e.index = index;
                });
                this.alreadyReivewNum = res.data.alreadyReivewNum;
                this.needReviewNum = res.data.needReviewNum - 1;
                this.totalPage = Math.ceil(this.alreadyReivewNum / this.filter.pageSize);
            });
        },
        getMore() {},
        onClickLeft() {
            this.$router.back();
        },
        getTimeText(time) {
            if (time) {
                const now = new Date().getTime();
                const timer = new Date(time).getTime();
                let minutes = (now - timer) / 1000 / 60;
                if (minutes > 60) {
                    minutes = minutes / 60;
                    return parseInt(minutes + "") + "小时前发布";
                } else {
                    return parseInt(minutes + "") + "分钟前发布";
                }
            } else {
                return "";
            }
        },
        sortList(type) {
            switch (type) {
                case "bonus":
                    if (this.filter.sortField === "addtime") {
                        this.filter.sortField = "bonus";
                        this.filter.isDesc = 1;
                    } else {
                        this.filter.isDesc = this.filter.isDesc ? 0 : 1;
                    }
                    break;
                case "addtime":
                    if (this.filter.sortField === "bonus") {
                        this.filter.sortField = "addtime";
                        this.filter.isDesc = 1;
                    } else {
                        this.filter.isDesc = this.filter.isDesc ? 0 : 1;
                    }
                    break;
            }
            this.getList();
        },
    },
};
</script>

<style lang="less" scoped>
.evaluation-wish {
    height: 64px;
    line-height: 64px;
    background: #fff3ea;
    border-radius: 8px;
    color: #fe7b07;
    font-size: 26px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    span {
        margin: 0 20px;
    }
}

.group-item {
    margin-top: 20px;
    background: #fff;
    padding: 0px 20px 0px 20px;
    position: relative;
    .seal {
        position: absolute;
        right: 20px;
        top: 10px;
        width: 125px;
    }
    .group-top {
        padding: 34px 0;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        .group-avatar {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            margin-right: 20px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
        }
        .group-apply {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-grow: 1;
        }
    }
    .user-wages {
        padding-bottom:20px;
        text-align: left;
        th {
            padding: 0 20px;
            font-size: 28px;
            color: #000;
            font-weight: bold;
        }
        td {
            padding: 20px;
        }
    }
}
.remote-list {
    background: #fff;
    margin-top: 20px;
    padding-bottom: 30px;
    &-head2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 110px;
        text-align: left;
        padding: 0 20px;
        span {
            color: #666666;
            font-size: 26px;
            &.strong {
                font-size: 28px;
                color: #000;
                font-weight: bold;
            }
        }
    }
}
.data-table {
    td.more {
        color: #333;
    }
    td.nomore {
        color: #999;
    }
}
</style>
